<template>
  <div style="position: relative;width: 100%;height: 100%;">
    <div :id="cid" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  import echarts from 'echarts/lib/echarts'
  import 'echarts/theme/shine'
  // 引入统计图类
  import 'echarts/lib/chart/line'
  // 引入提示框和标题组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'

  export default {
    name: "MealTag",
    props: {
      cid: '',
      countData: null
    },
    watch: {
      countData: {
        handler() {
          if (this.countData) {
            let dList = [];
            this.countData.forEach((item) => {
              dList.push(item.num);
            });
            this.dataList = dList;

            // 初始化图表
            this.initChart();
          }
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        // 统计图对象
        chartObj: null,
        // 查询统计参数
        params: {
          startTime: this.startTime || this.$moment().subtract(24, 'hours').format('MM-DD HH时'),
          endTime: this.endTime || this.$moment().format('MM-DD HH时'),
          prepType: this.prepType,
          timeType: this.timeType || 'hour',
          timeFormat: this.timeFormat || 'mm-dd hh24"时"'
        },
        //
        dataList: [],
        timeTypeFormat: {
          'hour': {showformat: 'MM-DD HH时', format: 'mm-dd hh24"时"'},
          'day': {showformat: 'YYYY-MM-DD', format: 'yyyy-mm-dd'},
          'month': {showformat: 'MM月', format: 'mm"月"'},
          'year': {showformat: 'YYYY年', format: 'yyyy"年"'}
        }
      }
    },
    mounted: function () {
      window.addEventListener('resize', () => this.resize(), false);
    },
    beforeDestroy: function () {
      window.removeEventListener('resize', this.resize(), false);
    },
    methods: {
      resize: function () {
        if (this.chartObj)
          this.chartObj.resize()
      },
      query: function () {
        // 初始化图表
        this.initChart();
      },
      initChart() {
        debugger
        if (!this.chartObj) {
          this.chartObj = echarts.init(document.getElementById(this.cid));
        }

        let option = {
          title: {
            text: '用餐人数统计'
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['正常', '预订不取餐', '不预定取餐', '临时报备取餐', '临时报备不取餐'],
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                rotate: 40
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              // data: [10, 52, 200, 334, 390],
              data: this.dataList,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}'
                  },
                  color: function (params) {
                    let colorarrays = ["#33c5e9", "#9ee7b8", "#ffdb5b", "#FF9F80", "#fb7193", "#e7bcf3", "#8378ea", "#9ee7b8", "#8378ea", "#33c5e9", "#9ee7b8", "#ffdb5b", "#33c5e9", "#9ee7b8", "#ffdb5b", "#FF9F80", "#fb7193", "#e7bcf3", "#8378ea", "#9ee7b8", "#8378ea", "#33c5e9", "#9ee7b8", "#ffdb5b", "#38a2da"];
                    return colorarrays[params.dataIndex];
                  }
                },

              }
            }
          ]
        };

        this.chartObj.setOption(option);
      }
    }
  }
</script>
